<template>
    <div class="sort">
        <h1 class="hospital">医院</h1>
        <div class="content">
            <div class="left">等级:</div>
            <ul class="tab">
                <li :class="{ active: activeLevelFlag === '' }" @click="changeLevel('')">全部</li>
                <li :class="{ active: activeLevelFlag === level.value }" v-for="level in levelArr" :key="level.id"
                    @click="changeLevel(level.value)">{{ level.name }}</li>
            </ul>
        </div>
        <div class="content">
            <div class="left">地区:</div>
            <ul class="tab">
                <li :class="{ active: activeRegionFlag === '' }" @click="changeRegion('')">全部</li>
                <li :class="{ active: activeRegionFlag === region.value }" v-for="region in regionArr" :key="region.id"
                    @click="changeRegion(region.value)">{{ region.name }}</li>
            </ul>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
defineOptions({
    name: "Sort",
})

// 引入请求医院等级/地区的接口
import { reqHospiLAR } from "@/api/home"
// 引入数据类型
import { HospitalLARResponseData, HospitalLARArr } from "@/api/home/type"

// 引入组合式 api 
import { onMounted, ref } from "vue"

// 定义一个数组存储医院等级数据
let levelArr = ref<HospitalLARArr>([]);
// 定义一个数组存储医院地区数据
let regionArr = ref<HospitalLARArr>([]);
// 控制医院等级/地区高亮
let activeLevelFlag = ref<string>('')
let activeRegionFlag = ref<string>('')

//获取医院等级/地区的数据
const getLevel = async () => {
    let levelResult: HospitalLARResponseData = await reqHospiLAR("HosType");
    let regionResult: HospitalLARResponseData = await reqHospiLAR("Beijin");

    // 存储医院等级/地区数据
    if (levelResult.code === 200) {
        levelArr.value = levelResult.data;
    }
    if (regionResult.code === 200) {
        regionArr.value = regionResult.data;
    }
};

// 点击等级按钮组件
const changeLevel = (value: string) => {
    activeLevelFlag.value = value;
    // 触发自定义事件
    $emit('getHostype', value);
}
// 点击地区按钮组件
const changeRegion = (value: string) => {
    activeRegionFlag.value = value
    // 触发自定义事件
    $emit('getDistrictCode', value);
}

// 自定义事件
let $emit = defineEmits(['getHostype', 'getDistrictCode'])

// 组件挂载完毕
onMounted(() => {
    getLevel();
});


</script>
    
<style lang="scss" scoped>
.sort {
    color: #7f7f7f;
    display: flex;
    flex-direction: column;

    .hospital {
        color: black;
        font-size: 900;
        margin: 10px 0;
    }

    .content {
        display: flex;

        .left {
            margin-bottom: 10px;
            width: 5%;
        }

        .tab {
            display: flex;
            flex-wrap: wrap;
            // 固定宽度，解决了多行 li 会向左挤压的问题
            width: 95%;

            li {
                // 鼠标悬浮时变成小手
                cursor: pointer;
                margin-right: 10px;
                margin-bottom: 10px;

                &.active {
                    color: #55a6fe;
                }
            }

            li:hover {
                color: #55a6fe;
            }
        }
    }
}
</style>